import Dialog from "./Dialog";
import { useState, useEffect, useRef } from "react"
export default ({ vaisible }: any) => {
  let [visible, setVisible]: [boolean, any] = useState<boolean>(false)
  let childRef: any = useRef()
  useEffect(() => {
    setVisible(false)
  }, [vaisible])

  let setConfig = (event: any) => {
    const target = event.target
    // const h = target.offsetHeight
    // const w = target.offsetWidth
    // const { pageX, pageY } = event
    const { width, height, x, y } = target.getBoundingClientRect()
    // console.log(`offset${w}:${h}--screen${event.screenX}:${event.screenY}--page${pageX}：${pageY}`)

    childRef.current.style.top = height + y - height / 1.5 + 'px'
    childRef.current.style.left = width + x + width / 2 + 'px'
    setVisible(true)
    event.stopPropagation()
  }
  return <div className="config">
    <button onClick={setConfig}>操作</button>
    <Dialog visible={visible} ref={childRef}></Dialog>
  </div>
}